let tools = [{
    // template name
    panel: 'channelInfoPanel',
    panelId: 'channel-info-panel',
    panelTitle: '频道信息',
    btnTarget: '#channel-info-panel',
    btnIcon: 'info_outline'
  },
  {
    panel: 'channelSearchPanel',
    panelId: 'channel-search-panel',
    panelTitle: '搜索历史信息',
    btnTarget: '#channel-search-panel',
    btnIcon: 'search'
  },
  {
    panel: 'channelMembersPanel',
    panelId: 'channel-members-panel',
    panelTitle: '频道成员',
    btnTarget: '#channel-members-panel',
    btnIcon: 'people'
  },
  {
    panel: 'channelSettingsPanel',
    panelId: 'channel-settings-panel',
    panelTitle: '频道设置',
    btnTarget: '#channel-settings-panel',
    btnIcon: 'settings'
  },
  {
    panel: 'channelAppsPanel',
    panelId: 'channel-apps-panel',
    panelTitle: '插件商店',
    btnClassName: 'mt-auto',
    btnTarget: '#channel-apps-panel',
    btnIcon: 'apps'
  }
];

Template.channelTools.onCreated(function() {
  this.tools = tools;
});

Template.channelTools.helpers({
  tools: () => {
    return Template.instance().tools;
  }
});

Template.channelTools.events({
  'click .channel-tools-button'(event) {
    let btns = $('.channel-tools-btns');
    let element = $(event.currentTarget);
    let targetPanel = element.data('target-panel');

    if (!targetPanel || targetPanel == '') {
      console.error('must set data-target-panel attribute.')
    }

    if (element.hasClass('active')) {
      element.removeClass('active');
      $(targetPanel).removeClass('d-flex');
    } else {
      btns.find('.channel-tools-button').removeClass('active');
      $('.channel-tools-panel').removeClass('d-flex');

      element.addClass('active');
      $(targetPanel).addClass('d-flex');
    }
  }
});